<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>蜜雪冰城</title>
    <link rel="icon" href="../../back/images/icons/蜜雪logo.svg">
    <!--不同屏幕尺寸根字体设置-->
    <script src="../js/base.js"></script>
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../back/plugins/element-ui/index.css" />
    <!--引入vant样式-->
    <link rel="stylesheet" href="../styles/vant.min.css"/>
    <!-- 引入样式  -->
    <link rel="stylesheet" href="../styles/index.css" />
    <!--本页面内容的样式-->
    <link rel="stylesheet" href="../styles/add-order.css" />
    <!--本页面内容的样式-->
    <link rel="stylesheet" href="../styles/main.css" />
    <link rel="stylesheet" type="text/css" href="../styles/wxzf.css">

    <style>
        .el-dialog__header{display: none}
        .el-dialog {
            margin-top: 0!important;
            position: absolute;
            border-radius: 2px;
            box-sizing: border-box;
            width: 50%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
        }
        .el-dialog__body {
             padding: 0 !important;
            color: #606266;
            word-break: break-all;
        }
    </style>
</head>
<body>
<div id="add_order" class="app" style="display: none" v-loading="loading" >
    <div class="divHead" style="background-color: white;height: 55rem">
        <div class="divTitle" style="color: black">
            <i class="el-icon-arrow-left" @click="goBack"></i>订单支付
        </div>
    </div>
    <div class="divContent">
        <div class="divAddress">
            <div style="height: 40rem"><p style="font-size: 22rem">预计2分钟后可取</p></div>
            <div class="divSplit"></div>
            <div @click="toAddressPage">
                <div class="address">{{address.detail}}</div>
                <div class="name" style="margin-top: -18rem">
                    <div style="font-size: 15rem;color: black"> <img src="./../images/dizhi.jpg" style="width: 18rem;margin: -2px 5px -4px 4px">蜜雪冰城（天河城分店）<span style="    right: 16rem;
    top: 68rem;
    position: absolute">130m</span></div>
                    <div style="margin: 9px 0px 11px 27px;color: rgb(167 167 167);font-size: 11rem">广州市天河区天河北路<span style="    right: 14rem;
    top:93rem;
    position: absolute">距离你有</span></div>
<!--                    <span>{{address.consignee}}{{address.sex === '1' ? '先生':'女士'}}</span>-->
                    <span>{{address.phone}}</span>
                </div>
<!--                <i class="el-icon-arrow-right"></i>-->
            </div>

<!--            <div class="divFinishTime">预计{{finishTime}}送达</div>-->
        </div>
        <div class="order">
            <div class="title">订单信息<span style="color: rgb(167 167 167);font-size: 13rem">(共{{goodsNum}}份饮品)</span></div>
            <div class="divSplit"></div>
            <div class="itemList">
                <div class="item" v-for="(item,index) in cartData" :key="index">
                    <el-image :src="imgPathConvert(item.image)">
                        <div slot="error" class="image-slot">
                            <img src="./../images/noImg.png"/>
                        </div>
                    </el-image>
                    <div class="desc">
                        <div class="name">{{item.name}}</div>
                        <div>{{item.description}}</div>
                        <div class="numPrice">
                            <span class="num">x{{item.number}}</span>
                            <div class="price">
                                <span class="spanMoney">￥</span>{{item.amount}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="divSplit"></div>
            <div style="font-size: 16rem;padding:16rem">优惠活动<span style="right: -182rem;font-size: 16rem;position: relative">-￥{{huodong}}</span></div>
            <div class="divSplit"></div>
            <div style="font-size: 16rem;padding: 16rem">优惠券<span style="right: -198rem;font-size: 16rem;position: relative">-￥{{youhui}}</span></div>
            <div class="divSplit"></div>
            <div style="font-size: 18rem;padding: 18rem">合计<span style="right: -220rem;font-size: 20rem;position: relative">￥{{goodsPrice}}</span></div>
        </div>
        <div class="note">

            <div class="title">支付方式</div>

<!--            <template>-->
<!--                <el-radio-group v-model="radio">-->
<!--                    <el-radio border="false" style="font-size: 20rem"></el-radio>-->
<!--                    <el-radio border="false" style="font-size: 20rem"></el-radio>-->
<!--                </el-radio-group>-->
<!--            </template>-->

            <div style="font-size: 17rem;margin-top: 15rem"><img src="../images/zhifu_weixin.png"style="width: 25rem;height: 22rem;padding-left: 13rem;padding-top: 2rem"><span style="width: 15rem"></span><i style="margin-left: 10rem">微信</i><span style="right: -198rem;font-size: 16rem;position: relative"></span><span><img style="    width: 24rem;height: 24rem;
    right: -215rem;
    position: relative" src="../images/gouxuan.jpg"></span></div>
        <div style="height: 2px;margin-top: 13rem;
    opacity: 1;
    background-color: #efefef;
    border: 0"></div>
            <div style="font-size: 17rem;margin-top: 17rem"><img src="../images/zhifubao.png"style="    width: 22rem;
    padding-left: 13rem;
   "><span style="width: 15rem"></span><i style="margin-left: 10rem">支付宝</i><span style="right: -198rem;font-size: 16rem;position: relative"><span><img style="    width: 24rem;height: 24rem;
    right: -4rem;
    position: relative" src="../images/weigouxuan.jpg"></span></span></div>

        </div>

<!--        <div class="note" style="height: 80rem">-->
<!--            <div class="title">备注</div>-->
<!--            <van-field-->
<!--                    v-model="note"-->
<!--                    rows="2"-->
<!--                    autosize-->
<!--                    type="textarea"-->
<!--                    maxlength="50"-->
<!--                    placeholder="请输入您需要备注的信息"-->
<!--                    show-word-limit-->
<!--            />-->
<!--        </div>-->
        <div class="note" style="height: 40rem;line-height: 40rem;font-size: 16rem">实付:<span style="font-size: 20rem;color: red;font-style: italic">{{goodsPrice}}</span></div>
        <div @click="goToPay()" style="    width: 97rem;
    height: 43rem;
    right: -247rem;
    position: relative;
    bottom: 48rem;
    background-color: #ed0b0b;
    font-size: 17rem;
    color: white;
    text-align: center;
    line-height: 43rem;
    border-radius: 10rem">支付</div>
    </div>

<!--    <div class="divCart">-->
<!--        <div :class="{imgCartActive: cartData && cartData.length > 0, imgCart:!cartData || cartData.length<1}"></div>-->
<!--        <div :class="{divGoodsNum:1===1, moreGoods:cartData && cartData.length > 99}" v-if="cartData && cartData.length > 0">{{ goodsNum }}</div>-->
<!--        <div class="divNum">-->
<!--            <span>￥</span>-->
<!--            <span>{{goodsPrice}}</span>-->
<!--        </div>-->
<!--        <div class="divPrice"></div>-->
<!--        <div :class="{btnSubmitActive: cartData && cartData.length > 0, btnSubmit:!cartData || cartData.length<1}" @click="goToPaySuccess">去支付</div>-->
<!--    </div>-->

    <div v-show="dialogVisible" style="top: 0;height: 100%;width: 100%;background-color: white;position: absolute" >
        <div class="header">
            <div class="all_w ">
                <div class="gofh"> <span @click="handleClose"><img style="width: 19rem;
    margin: 10rem 12px 6rem -1rem;" src="../images/jt_03.jpg"></span> </div>
                <div class="ttwenz">
                    <h4>确认交易</h4>
                    <h5>微信安全支付</h5>
                </div>
            </div>
        </div>
        <div class="wenx_xx">
            <div class="mz">蜜雪冰城</div>
            <div class="wxzf_price">￥{{this.goodsPrice}}</div>
        </div>
        <div class="skf_xinf">
            <div class="all_w"> <span class="bt">收款方</span> <span class="fr">天河北蜜雪冰城</span> </div>
        </div>
        <a href="javascript:void(0);" class="ljzf_but all_w">立即支付</a>
        <div class="ftc_wzsf"  v-loading="loading_pay" >
            <div class="srzfmm_box" >
                <div class="qsrzfmm_bt clear_wl"> <img src="../images/xx_03.jpg" class="tx close fl" style="height: 32rem"><span class="fl">请输入支付密码</span> </div>
                <div class="zfmmxx_shop">
                    <div class="mz">蜜雪冰城</div>
                    <div class="wxzf_price">￥{{this.goodsPrice}}</div>
                </div>
                <a class="blank_yh"> <img src="../images/jftc_07.jpg" class="fl"  ><span class="fl ml5">招商银行信用卡</span> <img src="../images/jftc_09.jpg" class="fr"></a>
                <ul class="mm_box">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li v-bind="input_last"></li>
                </ul>
            </div>
            <div class="numb_box">
                <div class="xiaq_tb"> <img src="../images/jftc_14.jpg" style="height: 8rem"> </div>
                <ul class="nub_ggg">
                    <li><a href="javascript:void(0);">1</a></li>
                    <li><a href="javascript:void(0);" class="zj_x">2</a></li>
                    <li><a href="javascript:void(0);">3</a></li>
                    <li><a href="javascript:void(0);">4</a></li>
                    <li><a href="javascript:void(0);" class="zj_x">5</a></li>
                    <li><a href="javascript:void(0);">6</a></li>
                    <li><a href="javascript:void(0);">7</a></li>
                    <li><a href="javascript:void(0);" class="zj_x">8</a></li>
                    <li><a href="javascript:void(0);">9</a></li>
                    <li><span></span></li>
                    <li><a href="javascript:void(0);" class="zj_x">0</a></li>
                    <li><span  class="del" > <img src="../images/jftc_18.jpg"   ></span></li>
                </ul>
            </div>
            <div class="hbbj"></div>
        </div>
        </div>
    </span>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../back/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../back/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./../js/vant.min.js"></script>
<script src="./../api/address.js"></script>
<!-- 引入axios -->
<script src="../../back/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script src="./../js/common.js"></script>
<script src="./../api/main.js"></script>
<script src="./../api/order.js"></script>
<script src="../js/jquery.js"></script>
<script type="text/javascript"></script>
</body>
<script>
    document.getElementById("add_order").style.display = "block";
    $(function(){
        //出现浮动层
        $(".ljzf_but").click(function(){
            $(".ftc_wzsf").show();
        });
        //关闭浮动
        $(".close").click(function(){
            $(".ftc_wzsf").hide();
        });
        //数字显示隐藏
        $(".xiaq_tb").click(function(){
            $(".numb_box").slideUp(500);
        });
        $(".mm_box").click(function(){
            $(".numb_box").slideDown(500);
        });
        //----
        var i = 0;
        $(".nub_ggg li a").click(function(){
            i++
            if(i<6){
                $(".mm_box li").eq(i-1).addClass("mmdd");
            }else{
                $(".mm_box li").eq(i-1).addClass("mmdd");
                setTimeout(function(){
                    this.vue.goToPaySuccess()
                    // $.get('', () => {
                    // this.goToPaySuccess()
                    // })
                    // location.href="pay-success.html";
                });
            }
        });
        $(".nub_ggg li .del").click(function(){
            if(i>0){
                i--
                $(".mm_box li").eq(i).removeClass("mmdd");
                i==0;
            }
        });
    });
    var vue=new Vue(
        {
        el:"#add_order",
        data(){
            return {
                address:{
                    phone:'',//手机号
                    consignee:'',//姓名
                    detail:'',//详细地址
                    sex:'1',
                    id:undefined
                },
                finishTime:'',//送达时间
                cartData:[],
                note:'',//备注信息
                huodong:'5.00',
                youhui:'0.00',
                amount:'',
                dialogVisible: false,
                pay_psw:'',
                input_last:'',
                loading:false,
                loading_pay:false
            }
        },
        computed:{
            goodsNum(){
                let num = 0
                this.cartData.forEach(item=>{
                    num += item.number
                })
                if(num <99){
                    return num
                }else{
                    return '99+'
                }
            },

            goodsPrice(){
                let price = 0
                this.cartData.forEach(item=>{
                    price += (item.number * item.amount)
                })
                price =price-this.huodong-this.youhui
                return price
            }
        },
        created(){
            this.initData()
        },
        mounted(){
            // var b = this.input_last.getAttribute("class").includes("mmdd");
            //     console.log(b)
            //     // this.goToPaySuccess()
        },
        methods: {
            goBack() {
                history.go(-1)
            },
            goToPay(){
                if(!this.loading){
                    this.loading=true
                }
                setTimeout(()=>{
                    this.loading=false
                    this.dialogVisible=true
                },500)

            },
            handleClose(done) {
                this.dialogVisible=false
            },
            initData() {
                //获取默认的地址
                // this.defaultAddress()
                //获取购物车的商品
                this.getCartData()
            },
            //获取默认地址
            async defaultAddress() {
                const res = await getDefaultAddressApi()
                if (res.code === 1) {
                    this.address = res.data
                    this.getFinishTime()
                } else {
                    window.requestAnimationFrame(() => {
                        window.location.href = '/front/page/address-edit.html'
                    })
                }
            },
            //获取送达时间
            getFinishTime() {
                let now = new Date()
                let hour = now.getHours() + 1
                let minute = now.getMinutes()
                if (hour.toString().length < 2) {
                    hour = '0' + hour
                }
                if (minute.toString().length < 2) {
                    minute = '0' + minute
                }
                this.finishTime = hour + ':' + minute
            },
            toAddressPage() {
                window.requestAnimationFrame(() => {
                    window.location.href = '/front/page/address.html'
                })
            },
            //获取购物车数据
            async getCartData() {
                const res = await cartListApi({})
                // if (res.code === 1) {
                    this.cartData = res.data.data
                    console.log(res.data.data)
                // }
                // else {
                //     console.log(res.data)
                //     this.$notify({type: 'warning', message: res.msg});
                // }
            },
            async goToPaySuccess() {
                const params = {
                    remark: this.note,
                    payMethod: 1,
                    addressBookId: this.address.id,
                    amount: this.goodsPrice
                }
                const res = await addOrderApi(params)
                if (res.data.code === 1) {
                    if (!this.loading_pay){this.loading_pay=true}
                    setTimeout(()=>{
                        this.loading_pay=false
                        window.requestAnimationFrame(() => {
                            window.location.replace('/front/page/pay-success.html?amount='+this.goodsPrice)
                        })
                    },500)

                } else {
                    console.log("支付失败")
                    console.log(res.data.code)
                    this.$notify({type: 'warning', message: res.msg});
                }
            },
            //网络图片路径转换
            imgPathConvert(path) {
                return imgPath(path)
            },


            //跳转到去结算界面
            toAddOrderPage() {
                if (this.cartData.length > 0) {
                    window.requestAnimationFrame(() => {
                        window.location.href = '/front/page/add-order.html'
                    })
                }
            },
            toUserPage() {
                window.requestAnimationFrame(() => {
                    window.location.href = '/front/page/user.html'
                })
            },
            toMenuPage() {
                window.requestAnimationFrame(() => {
                    window.location.href = '/front/page/menu.html'
                })
            },
            toMesPage() {
                window.requestAnimationFrame(() => {
                    window.location.href = '/front/page/msg.html'
                })
            },
            toIndexPage() {
                window.requestAnimationFrame(() => {
                    window.location.href = '/front/index.html'
                })
            },

        }
        },

    )

</script>
</html>
